<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="security"
	uri="http://www.springframework.org/security/tags"%>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"
 	type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#pendingTransactionTable").dataTable();
		$("#transactionTable").dataTable();
		$("#requestTransaction").validate({
			rules: {
				amount: {
					required: true,
					number: true
				},
			},
			submitHandler: function(){
		          $("#requestTransaction").submit();
		    }
		})
	});
	
	function decide(state, index) {
		$.ajax({
			type : "POST",
			url : "adminApproveTransaction",
			data : {
				"state" : state,
				"index" : index,
			},
			//expect html to be returned
			success : function() {
				window.location.reload(); 
			},
			error : function() {
				alert("Fail");
			}
		});
	}
</script>

<div id="content-outer">
	<h1>Transaction Information</h1>
	<div id="content">
		<security:authorize ifAnyGranted="ROLE_USER">
			<table>
				<tr valign="top">
					<td>
						<form action="requestTransaction" method="post" id="requestTransaction">
							<table>
								<tr>
									<th>Source Account:</th>
									<td><select id="selectAccountType" name="sourceAccount">
											<option></option>
											<c:forEach var="account" items="${listAccounts}">

												<option value="${account.accountNumber}">${account.accountNumber}
													- ${account.type}</option>
											</c:forEach>
									</select></td>
									<td></td>
								</tr>
								<tr>
									<th>Target Account:</th>
									<td><input type="text" class="inp-form"
										name="targetAccount" /></td>
								</tr>

								<tr>
									<th valign="top">Amount</th>
									<td><input type="text" class="inp-form" name="amount" id="amount"/></td>
								</tr>
								<tr>
									<th valign="top"></th>
								</tr>

								<tr>
									<td></td>
									<td><input type="submit" class="btn btn-primary"
										value="Save Transaction" id="addAccount" /></td>
									<td></td>
								</tr>
							</table>
						</form>
					</td>
				</tr>
			</table>
		</security:authorize>

		<security:authorize ifAnyGranted="ROLE_ADMIN">
			<h2>Pending transaction</h2>
			<table id="pendingTransactionTable">
				<thead>
					<tr>
						<th>Source Account</th>
						<th>Target Account</th>
						<th>Begin date</th>
						<th>End date</th>
						<th>Amount</th>
						<th>State</th>
						<security:authorize ifAnyGranted="ROLE_ADMIN">
							<th>Approved/ Rejected</th>
						</security:authorize>
					</tr>
				</thead>
				<tbody>
					<c:forEach var="transaction" items="${listTransactions}"
						varStatus="loop">
						<c:if test="${transaction.transactionState.getState() == 'pending'}">
							<tr>
								<td align="center">${transaction.sourceAccount.getAccountNumber()}</td>
								<td align="center">${transaction.targetAccount.getAccountNumber()}</td>
								<td align="center">${transaction.beginDate}</td>
								<td align="center">${transaction.endDate}</td>
								<td align="center">${transaction.amount}</td>
								<td align="center">${transaction.transactionState.getState()}</td>
								<security:authorize ifAnyGranted="ROLE_ADMIN">
									<td align="center">
										<input type="button" value="Approve" 
											onclick="decide('approved', '${loop.index}');"
											class="btn btn-primary"/>
										<input type="button" value="Reject" 
											onclick="decide('rejected', '${loop.index}');"
											class="btn btn-primary"/>
									</td>
								</security:authorize>
							</tr>
						</c:if>
					</c:forEach>
				</tbody>
			</table>
		</security:authorize>

		<h2>Transaction list</h2>
		<table id="transactionTable">
			<thead>
				<tr>
					<th>Source Account</th>
					<th>Target Account</th>
					<th>Begin date</th>
					<th>End date</th>
					<th>Amount</th>
					<th>State</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach var="transaction" items="${listTransactions}"
					varStatus="loop">
					<tr>
						<td align="center">${transaction.sourceAccount.getAccountNumber()}</td>
						<td align="center">${transaction.targetAccount.getAccountNumber()}</td>
						<td align="center">${transaction.beginDate}</td>
						<td align="center">${transaction.endDate}</td>
						<td align="center">${transaction.amount}</td>
						<td align="center">${transaction.transactionState.getState()}</td>
						
					</tr>
				</c:forEach>
			</tbody>
		</table>
	</div>
	<div class="clear">&nbsp;</div>
</div>
